<template>
  <el-dialog
    :model-value="visible"
    :before-close="close"
    draggable
    :title="'公司' + title">
    <el-form
      :model="formData"
      ref="formRef"
      :rules="rules"
      :disabled.="!isEdit">
      <el-form-item
        label="公司名称"
        :label-width="formLabelWidth"
        prop="companyName">
        <el-input
          clearable
          v-model.trim="formData.companyName"
          autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item
        label="注册地址"
        :label-width="formLabelWidth"
        prop="address">
        <el-input
          clearable
          v-model.trim="formData.address"
          autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item
        label="工商注册号"
        :label-width="formLabelWidth"
        prop="busRegistNo">
        <el-input
          clearable
          v-model.trim="formData.busRegistNo"
          autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="电话" :label-width="formLabelWidth" prop="tel">
        <el-input
          clearable
          v-model.trim="formData.tel"
          autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="传真" :label-width="formLabelWidth" prop="fax">
        <el-input
          clearable
          v-model.trim="formData.fax"
          autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item
        label="开户银行"
        :label-width="formLabelWidth"
        prop="bankName">
        <el-input
          clearable
          v-model.trim="formData.bankName"
          autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item
        label="银行账号"
        :label-width="formLabelWidth"
        prop="account">
        <el-input
          clearable
          v-model.trim="formData.account"
          autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item
        label="法人代表"
        :label-width="formLabelWidth"
        prop="legalPerson">
        <el-input
          clearable
          v-model.trim="formData.legalPerson"
          autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="邮编" :label-width="formLabelWidth" prop="postal">
        <el-input
          clearable
          v-model.trim="formData.postal"
          autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button v-if="isEdit" type="primary" @click="submit(formRef)"
          >{{ title }}提交</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="Operate">
  import { reactive, toRefs, ref } from "vue";
  import type { FormInstance, FormRules } from "element-plus";
  import { ElMessage } from "element-plus";
  // import { ElNotification } from "element-plus";
  import useCompanyStore from "@/store/modules/company";
  import { ICompanyInfo, ICompanyParas } from "@/apis/company/type";
  //

  const formRef = ref<FormInstance>();
  // const emit = defineEmits(["refreshData"]);
  const state = reactive<{
    formLabelWidth: string;
    formData: ICompanyInfo;
    title: string;
    visible: boolean;
    isEdit: boolean;
  }>({
    formLabelWidth: "120px",
    formData: { postal: "05000" },
    title: "更新",
    visible: false,
    isEdit: false,
  });

  const { formLabelWidth, formData, title, visible, isEdit } = toRefs(state);

  const rules = reactive<FormRules<ICompanyInfo>>({
    companyName: [
      { required: true, message: "请输入公司名称", trigger: "blur" },
      { min: 3, max: 50, message: "长度在 3 到 50 个字符", trigger: "blur" },
    ],
    busRegistNo: [
      { required: true, message: "请输入统一社会信用代码", trigger: "blur" },
      { min: 12, max: 18, message: "长度为18个字符", trigger: "blur" },
    ],
    legalPerson: [
      { required: true, message: "请输入法定代表人", trigger: "blur" },
      { min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur" },
    ],
    address: [
      { required: true, message: "请输入地址", trigger: "blur" },
      { min: 3, max: 80, message: "长度在 3 到 50 个字符", trigger: "blur" },
    ],
    tel: [
      { required: true, message: "请输入电话", trigger: "blur" },
      { min: 3, max: 20, message: "长度在 3 到 50 个字符", trigger: "blur" },
    ],
    bankName: [
      { required: true, message: "请输入开户行", trigger: "blur" },
      { min: 3, max: 50, message: "长度在 3 到 50 个字符", trigger: "blur" },
    ],
    account: [
      { required: true, message: "请输入银行账户", trigger: "blur" },
      { min: 3, max: 50, message: "长度在 3 到 50 个字符", trigger: "blur" },
    ],
  });

  const open = (paras: ICompanyParas) => {
    visible.value = true;
    const { type, row } = paras;
    if (type === "edit") {
      formData.value = Object.assign(formData.value, row);
      isEdit.value = true;
      title.value = "编辑修改";
    } else if (type === "add") {
      isEdit.value = true;
      title.value = "新增";
    } else if (type === "view") {
      formData.value = Object.assign(formData.value, row);
      formRef.value?.clearValidate();
      isEdit.value = false;
      title.value = "详情";
    } else {
      //never类型与穷尽性检查
      const _exhaustiveCheck: never = type;
      return _exhaustiveCheck;
    }
  };

  const companyStore = useCompanyStore();
  //暴露方法
  defineExpose({ open });

  const close = () => {
    formData.value = {};
    visible.value = false;
  };

  const handleForm = () => {
    // 新增时，如果fax为空，则赋值为tel的值;
    formData.value.fax = formData.value.fax || formData.value.tel;
    formData.value.status = 1;
  };

  const submit = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.validate(valid => {
      if (!valid) return;
      handleForm();
      if (formData.value._id) {
        // 调用修改的接口
        companyStore.updateCompany(formData.value._id, formData.value);
        //重新获取数据,列表数据更新
        companyStore.getInfo();
        close();
      } else {
        companyStore.isHas(formData.value.busRegistNo!);
        if (companyStore.isHasBusRegistNo) {
          ElMessage.error("该社会信用代码已存在");
          formData.value.busRegistNo = "";
          return;
        } else {
          // 调用新增的接口
          companyStore.addCompany(formData.value);
          // 重新获取数据,列表数据更新
          companyStore.getInfo();
        }
      }
      // emit("refreshData");
      formData.value = {};
    });
  };
</script>

<style scoped lang="scss"></style>
